import { createApp } from 'vue'

import App from './App.vue'
import router, { setupRouter } from './router'
import './styles'
import './common.css'
import { setupGlobalComponent } from '@/layouts'
import { setupPinia } from '@/store/pinia'
import setupRouterGuard from './router/guard'
import useUserStore from '@/store/modules/user'
import '@icon-park/vue-next/styles/index.css'
import dayjs from 'dayjs'
import { install } from '@icon-park/vue-next/es/all'
// 如果需要对接正式的接口，需要下面代码注释或者删除
// import { setupMock } from '../mock'
import NProgress from 'nprogress' // 导入 nprogress模块
import 'nprogress/nprogress.css' // 导入样式，否则看不到效果

NProgress.configure({ showSpinner: false }) // 显示右上角螺旋加载提示
NProgress.configure({
  easing: 'ease',
  speed: 500,
  trickleSpeed: 200,
  showSpinner: false,
})
//当路由进入前
router.beforeEach((to, from, next) => {
  // 每次切换页面时，调用进度条
  NProgress.start() //开启进度条
  // 这个一定要加，没有next()页面不会跳转的
  next()
})
//当路由进入后：关闭进度条
router.afterEach(() => {
  // 在即将进入新的页面组件前，关闭掉进度条
  NProgress.done() //完成进度条
})

// 设置新的视口宽度
function setViewportWidth(newWidth: any) {
  // 创建一个新的meta标签
  const meta = document.createElement('meta')
  meta.setAttribute('name', 'viewport')
  meta.setAttribute('content', 'width=' + newWidth)

  // 先移除已有的viewport meta标签
  const oldMeta = document.querySelector('meta[name="viewport"]')
  if (oldMeta) {
    document.head.removeChild(oldMeta)
  }

  // 添加新的viewport meta标签
  document.head.appendChild(meta)
}

setViewportWidth(1600)

function setup() {
  const app = createApp(App)
  app.config.compilerOptions.isCustomElement = (tag) => {
    return tag.startsWith('ion-')
  }
  setupPinia(app)
  setupRouter(app)
  setupRouterGuard()
  setupGlobalComponent(app)
  // 如果需要对接正式的接口，需要下面代码注释或者删除
  // setupMock()
  install(app, 'i')

  // 使 v-focus 在所有组件中都可用
  app.directive('focus', {
    mounted: (el) => el.querySelector('input').focus(), //使el-input自动聚焦 所有页面都可使用 v-focus使用
  })
  app.config.globalProperties.$dayjs = dayjs
  app
    .directive('permission', (el, binding) => {
      //binding.value=>使用v-permission绑定的值
      //与后端返回的数组进行比对，如果后端返回的数组中的值包含binding.value
      //则有权限，该按钮展示，否则隐藏
      const mainStore = useUserStore().role
      if (mainStore.length === 0) {
        // console.log(el.style, '权限')
      } else {
        const role = mainStore.some((item: string) => item === binding.value)
        if (role) {
          // alert('有权限');
        } else {
          el.style.display = 'none'
          // alert('无权限，删除改节点');
        }
      }
      // 这将被作为 `mounted` 和 `updated` 调用阿松大
    })
    .mount('#app')
}

// 启动项目
setup()
